<template>
    <div class="row">
        <div class="col-md-5 detail_box">
            <h2>个人信息</h2>
            <div class="info_first">
                <el-avatar :size="150">
                  <img :src=this.avatar alt="">
                </el-avatar>
                <div>
                    <h3>
                        <span style="color:#40485b;">{{ this.nickname }}</span>
                    </h3>
                </div>
            </div>

            <div class="info_second">
                <p>待确认：{{ this.release }} 个</p>
                <p>待完成：{{ this.receive }} 个</p>
                <p>未完成：{{ this.failed }} 个</p>
                <p>已完成：{{ this.complete }} 个</p>
                <p>完成率：{{ this.credit }} %</p>
            </div>
        </div>

        <div class="col-md-7 statistic_box">
            <!-- echarts区域 -->
            <div class="">
                <el-card>
                    <div id="J_chartPieBox" class="chart-box"></div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      avatar: "",
      nickname: "",
      // 总订单数
      all: 0,
      // 待确认 订单数
      release: 0,
      // 待完成 订单数
      receive: 0,
      // 已完成 订单数
      complete: 0,
      // 超时未完成 订单数
      failed: 0,
      // 完成度（ % ）
      credit: 0,
      // 图表
      chartPie: null
    }
  },
  methods: {
    // 获取个人信息
    async getUserTotal () {
      const { data: res } = await this.$http.get('/help/nav/total', {
        params:{
          uid: localStorage.getItem("userId")
        }
      },{
        emulateJSON:true
      })
      if (res.success !== undefined) {
        window.location.href = "http://malloc.press:9000/user/nav/toLogin"
      }
      this.all = res.all
      this.release = res.release
      this.receive = res.receive
      this.complete = res.complete
      this.failed = res.failed
      if (this.complete === 0) {
        if (this.failed === 0) {
          this.credit = 100
        } else {
          this.credit = 0
        }
      } else {
        this.credit = (100 * (this.complete-0) / (this.complete-0+this.failed)).toFixed(2)
      }
      this.initChartPie()
    },
    // 饼状图
    initChartPie () {
      console.log(this.complete)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['待确认', '待完成', '未完成', '已完成']
        },
        series: [
          {
            name: '用户数据统计',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: this.release, name: '待确认'},
              {value: this.receive, name: '待完成'},
              {value: this.failed, name: '未完成'},
              {value: this.complete, name: '已完成'}
            ]
          }
        ]
      };
      this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
      this.chartPie.setOption(option)
      window.addEventListener('resize', () => {
        this.chartPie.resize()
      })
    }
  },
  created () {
    this.nickname = localStorage.getItem("nickname")
    this.avatar = localStorage.getItem("avatar")
    this.getUserTotal()
  },
  mounted () {
    this.initChartPie()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartPie) {
      this.chartPie.resize()
    }
  }

}
</script>

<style lang="less" scoped>
.row{
    div{
        // border:1px solid red;
    }
    .detail_box{
      padding-top: 2%;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 1%;
        .info_first{
            text-align: center;
            .el-avatar{
                border: 1px solid rgb(243, 219, 190);
                background-color: rgb(252, 251, 249);
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                padding: 8px;
                position: relative;
                img{
                    border-radius: 50%;
                    width: 90%;
                    height: 90%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: #fff;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                }
            }
        }
        .info_second{
            padding: 2% 3%;

        }
    }
    .statistic_box{
        background-color: rgb(208, 233, 243);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 1%;
        // 不给高度，无法显示echarts
        .chart-box {
            min-height: 400px;
        }

        .block{

            h5{
            font-size: 18px;
            color: #333;
            text-align: left;
            border-right: none;
            padding: 2% 0% 3%;
          }
          .radio{
            margin-bottom: 2%;
          }
          .title_{
            padding-bottom: 2%;
          }
          .left_{
            float: left;
            font-size: 0.9rem;
            color: #888;
            i{
              margin-left: 5px;
              margin-right: 2px;
            }
          }
          .right_{
            float: right;
            font-size: 0.8rem;
            color: #aaa;
            i{
              margin-left: 5px;
              margin-right: 2px;
            }
          }
        }
    }
}
</style>
